{% extends 'base/base.html' %}
{% load poll_extras %}
{% block title %}
    文章详情
{% endblock %}
{% block link %}
    <link rel="stylesheet" href="{% static 'css/news/news-detail.css' %}">
{% endblock %}
{% block main %}
    <!-- main start -->

    <main id="main">
        <div class="w1200 clearfix">
            <!-- news-contain start  -->
            <div class="news-contain">
                <h1 class="news-title">{{ article.title }}</h1>
                <div class="news-info">
                    <div class="news-info-left">
                        <span class="news-author">{{ article.author.username }}</span>
                        <span class="news-pub-time">{{ article.update_time }}</span>
                        <span class="news-type">{{ article.tag.name }}</span>
                    </div>
                </div>
                <br>
                <article class="news-content">
                    {{ article.content |safe }}
                </article>
                <div class="comment-contain">
                    <div class="comment-pub clearfix">
                        <div class="new-comment">
                            文章评论(<span class="comment-count">{{ comments|length }}</span>)
                        </div>

                        {% if user.is_authenticated %}
                            <div class="comment-control logged-comment">
                                <input type="text" placeholder="请填写评论" class="comment">
                            </div>
                            <button class="comment-btn" data-news-id="{{ article.id }}">发表评论</button>
                        {% else %}
                            <div class="comment-control please-login-comment">
                                <input type="text" placeholder="请登录后参加评论">
                            </div>
                        {% endif %}
                    </div>
                    <ul class="comment-list">
                        {% for one_comment in comments %}
                            <li class="comment-item">
                                <div class="comment-info clearfix">
                                    <img src="{% static 'images/avatar.jpeg' %}" alt="avatar" class="comment-avatar">
                                    <span class="comment-user">{{ one_comment.author.username }}</span>
                                </div>
                                <div class="comment-content">{{ one_comment.content }}</div>
                                {% if one_comment.parent %}
                                    <div class="parent_comment_text">
                                        <div class="parent_username">[ 回复 ]&nbsp;{{ one_comment.parent.author.username }}： {{ one_comment.parent.content }}</div>
                                        <br/>
                                    </div>
                                {% endif %}
                                <div class="comment_time left_float">{{ one_comment.update_time|customTimeFmt }}</div>
                                <a href="javascript:void(0);" class="reply_a_tag right_float">回复</a>
                                <form class="reply_form left_float"
                                      data-parent-id="{{ one_comment.id }}"
                                      data-news-id="{{ one_comment.news_id }}">
                                    <textarea class="reply_input"></textarea>
                                    <input type="button" value="回复" class="reply_btn right_float">
                                    <input type="reset" name="" value="取消" class="reply_cancel right_float">
                                </form>
                            </li>
                        {% endfor %}
                    </ul>
                </div>

            </div>
            <!-- news-contain end  -->

            <!-- side start -->
            {% include 'base/side.html' %}
            <!-- side end -->
        </div>
    </main>
    <!-- main end -->
{% endblock %}
{% block script %}
    <script src="{% static 'js/article_details.js' %}"></script>
{% endblock %}